<template>
    <div class="layout-main">
        <div class="section section-filter">
            <div class="panel-title">
                <span class="title">筛选条件</span>
            </div>
            <div class="panel-content">
                <el-form :inline="true" :model="tableData.filter" @keyup.enter.native="sumbitSave">
                    <el-form-item label="案件创建时间" prop="adate">
                        <el-date-picker v-model="tableData.filter.cdate" value-format="yyyy-MM-dd" type="date" placeholder="请选择案件创建时间"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="编号" prop="caseCode">
                        <el-input v-model="tableData.filter.caseCode" placeholder="请输入编号"></el-input>
                    </el-form-item>
                    <el-form-item label="来源渠道">
                        <el-select v-model="tableData.filter.source" placeholder="请选择来源渠道">
                            <el-option label="所有" value=""></el-option>
                            <el-option v-for="item in dicts.sourceType" :key="item.id" :label="item.name" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="产品类型">
                        <el-select v-model="tableData.filter.product" placeholder="请选择产品类型">
                            <el-option label="所有" value=""></el-option>
                            <el-option v-for="item in dicts.productType" :key="item.id" :label="item.name" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="风险类别">
                        <el-select v-model="riskCategoryForm.id" placeholder="请选择风险类别" @change="riskCategoryChange">
                            <el-option label="所有" value=""></el-option>
                            <el-option v-for="item in dicts.riskCategory" :key="item.value" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="风险类型">
                        <el-select v-model="riskTypeForm.value" placeholder="请选择风险类型" @change="riskTypeChange">
                            <el-option label="所有" value=""></el-option>
                            <el-option v-for="item in riskTypeList" :key="item.id" :label="item.name" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="风险等级">
                        <el-select v-model="riskLevelForm.value" placeholder="请选择风险等级">
                            <el-option label="所有" value=""></el-option>
                            <el-option v-for="item in riskLevelList" :key="item.id" :label="item.name" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="举报人姓名">
                        <el-input v-model="tableData.filter.reflectName" placeholder="请输入举报人姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="举报人手机号">
                        <el-input v-model="tableData.filter.reflectPhone" placeholder="请输入举报人手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="被举报人姓名">
                        <el-input v-model="tableData.filter.beReportedName" placeholder="请输入被举报人姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="被举报人手机号">
                        <el-input v-model="tableData.filter.beReportedPhone" placeholder="请输入被举报人手机号"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="所属分部">
                        <el-input v-model="tableData.filter.salesDeptName" placeholder="请输入所属分部"></el-input>
                    </el-form-item>
                    <el-form-item label="分部负责人">
                        <el-input v-model="tableData.filter.salesDeptPrincipal" placeholder="请输入分部负责人"></el-input>
                    </el-form-item> -->
                    <el-form-item label="案件状态">
                        <el-select v-model="tableData.filter.caseStatus" placeholder="请选择案件状态">
                            <el-option label="所有" value=""></el-option>
                            <el-option v-for="item in dicts.caseStatus" :key="item.id" :label="item.name" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="案件类型">
                        <el-select v-model="tableData.filter.caseType" placeholder="请选择案件类型">
                            <el-option label="所有" value=""></el-option>
                            <el-option v-for="item in dicts.caseType" :key="item.id" :label="item.name" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="关键字">
                        <el-input v-model="tableData.filter.keyword" title="请输入举报人或者被举报人或者手机号或者身份证" placeholder="请输入关键字"></el-input>
                    </el-form-item>
                </el-form>
                <div class="form-btn">
                    <button @click="sumbitSave">筛选</button>
                    <button class="btn-reset" @click="reset">重置</button>
                </div>
            </div>
        </div>
        <div class="section section-table">
            <div class="panel-title">
                <span class="title">筛选结果</span>
            </div>
            <div class="panel-content">
                <!--  <div class="section-tool">
                <button class="btn-cancel" @click="assignSelected">分配选中</button>
                <button class="btn-cancel" @click="assignUnselected">分配所有[未分配]案件</button>
            </div> -->
                <el-table :data="tableData.data" border style="width: 100%">
                    <el-table-column  fixed="right" label="操作" width="145">
                        <template slot-scope="scope">
                            <permission permission-key="caseInfo:detailCaseInfoVo">
                                <router-link :to="{ path: '/case/detail', query: { id: scope.row.id,origin:'violate' }}">详情</router-link>
                            </permission>
                            <permission permission-key="workbench:case.takeBack">
                                <a v-if="userInfo.id!==scope.row.caseUserId&&scope.row.caseStatus==1" @click="showRecoverCaseLayer(scope.row.id)">收回</a>
                                <a v-else class="disable">收回</a>
                            </permission>
                            <permission permission-key="workbench:case.allotSelected">
                                <a v-if="userInfo.id==scope.row.caseUserId&&(scope.row.caseStatus==0||scope.row.caseStatus==1)" @click="showAssignmentLayer(scope.row.id,scope.row.caseType)">分派</a>
                                <a v-else class="disable">分派</a>
                            </permission>
                        </template>
                    </el-table-column>
                    <el-table-column prop="caseCode" label="编号" width="218">
                    </el-table-column>
                    <el-table-column prop="threadDate" label="线索获取时间" width="155">
                    </el-table-column>
                    <el-table-column prop="cdate" label="案件创建时间" width="155">
                    </el-table-column>
                    <el-table-column prop="sourceName" label="来源渠道" width="108">
                    </el-table-column>
                    <el-table-column prop="productName" label="产品类型" width="100">
                    </el-table-column>
                    <el-table-column prop="riskCategoryName" label="风险类别" width="138">
                    </el-table-column>
                    <el-table-column prop="riskTypeName" label="风险类型" width="138">
                    </el-table-column>
                    <el-table-column prop="riskLevelName" label="风险等级" width="78">
                    </el-table-column>
                    <el-table-column prop="reflectName" label="举报人姓名" width="108">
                    </el-table-column>
                    <el-table-column prop="reflectPhone" label="举报人手机号" width="120">
                    </el-table-column>
                    <el-table-column prop="informerSalesDeptName" label="举报人所属营业部" width="150">
                    </el-table-column>
                    <el-table-column prop="beReportedName" label="被举报人姓名" width="120">
                    </el-table-column>
                    <el-table-column prop="beReportedPhone" label="被举报人手机号" width="120">
                    </el-table-column>
                    <el-table-column prop="beReportedBusiness" label="被举报人所属营业部" width="150">
                    </el-table-column>
                    <el-table-column prop="caseTypeName" label="案件类型" width="108">
                    </el-table-column>
                    <el-table-column prop="caseStatusName" label="案件状态" width="100">
                    </el-table-column>
                    <!-- <el-table-column prop="salesDeptName" label="所属分部" width="120">
                </el-table-column>
                <el-table-column prop="salesDeptPrincipal" label="分部负责人" width="100">
                </el-table-column> -->
                    <el-table-column prop="lastStepUserName" label="上一步操作人" width="106">
                    </el-table-column>
                    <el-table-column prop="inspector" label="当前操作人" width="100">
                    </el-table-column>
                </el-table>
                <el-pagination v-if="tableData.total" @size-change="sizeChange" @current-change="currentChange" :currentPage="tableData.filter.pageBean.pageIndex"
                    :page-size="tableData.filter.pageBean.pageSize" :total="tableData.total" :page-sizes="[tableData.sizes,tableData.sizes*2, tableData.sizes*3, tableData.sizes*4]"
                    layout="total, sizes, prev, pager, next, jumper">
                </el-pagination>
            </div>
        </div>
        <!-- 申请收回 -->
        <layer :data="recoverCaseLayer" @on-ok="recoverCaseSave"></layer>
        <!-- 分派案件 -->
        <layer :data="assignmentLayer" @on-ok="showTipsLayer">
            <el-form :model="assignmentLayer.form">
                <el-form-item label="分派方式" class="is-required">
                    <el-select v-model="assignmentLayer.form.type" placeholder="请选择分派方式" @change="assignmentMethodChange">
                        <el-option label="一键分派" value="2"></el-option>
                        <el-option label="手动分派" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <template v-if="targetData.active">
                    <el-form-item label="选择角色" class="is-required">
                        <el-select v-model="roleData.form.name" placeholder="请选择角色" @change="roleChange">
                            <el-option v-for="item in roleData.list" :key="item.nextRoleId" :label="item.nextRoleName" :value="item.nextRoleId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="选择分派对象" class="is-required">
                        <el-select v-model="targetData.form.id" placeholder="根据所选角色展示人员">
                            <el-option v-for="item in targetData.list" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </template>
            </el-form>
        </layer>
        <!-- 分派提示弹窗 -->
        <layer :data="tipsLayer" @on-ok="assignmentCaseSave"></layer>
    </div>
</template>
<script>
    import cases from '@/mixins/case'
    import assignment from '@/mixins/assignment'

    export default {
        name: 'case',
        mixins: [cases, assignment],
        data() {
            return {
                userInfo: this.$store.state.common.userInfo,
                // 案件类型
                caseType: 'violate',
                // 审核人
                superiorUser: [],
                searchLoading: false,
                // 分配案件
                assignmentInfo: {
                    show: false,
                    title: '分配案件',
                    // 选中条数
                    assignmentNum: '',
                    way: 0,
                    data: {
                        targetId: '',
                        idList: ''
                    },
                    rules:
                        {
                            targetId: { required: true, message: '请选择审核人', trigger: 'blur' },
                        },
                    users: []
                },
                // 申请收回
                recoverCaseLayer: {
                    id: 0,
                    show: false,
                    flag: true,
                    title: '案件收回',
                    tips: '确认收回此案件？'
                },
                tipsLayer: {
                    show: false,
                    flag: true,
                    title: '提示',
                    tips: '确认分派此案件？'
                }
            }
        },
        mounted() {
            this.$store.dispatch('setBreadData', [
                {
                    name: '案件管理'
                }
            ])
            this.sumbitSave()
        },
        methods: {
            // 申请收回
            showRecoverCaseLayer(id) {
                this.recoverCaseLayer.show = true
                this.recoverCaseLayer.id = id
            },
            // 提交申请收回
            recoverCaseSave() {
                api.takeBackCase({ id: this.recoverCaseLayer.id }).then(res => {
                    this.$msg.success('收回成功')
                    this.recoverCaseLayer.show = false
                    this.sumbitSave()
                    this.$store.dispatch('getUnProcess')
                }).catch(res => {
                    console.log(res)
                })
            },
            // 分派案件提示
            showTipsLayer() {
                if (!this.assignmentLayer.form.type) {
                    this.$msg.error('请选择分派方式')
                    return false
                }
                if (this.assignmentLayer.form.type == 1) {
                    if (!this.targetData.active) {
                        this.targetData.form.id = this.userInfo.id
                    }
                    if (!this.targetData.form.id) {
                        this.$msg.error('请选择分派对象')
                        return false
                    }
                }
                this.tipsLayer.show = true
            }
        }
    }
</script>